<script setup lang="ts">
import router from "@/router";
import { storeToRefs } from "pinia";
import useStore from "@/store";
import { onMounted } from 'vue';
const { user, editor } = useStore();
const { clearUser } = user;
const { success, name, phone, mail, password, boxState } = storeToRefs(user);
const { nowTextId, text } = storeToRefs(editor);
const handleExit = () => {
  clearUser();
  boxState.value = false;
  nowTextId.value = null;
  text.value = '';
  setTimeout(() => router.push('/login'), 10);
}
onMounted(() => {
  document.body.style.setProperty('--el-color-primary', '#b83f45');
  document.body.style.setProperty('--el-color-primary-light-9', '#F5FBF0');
  document.body.style.setProperty('--el-color-primary-light-3', '#95d475');
})

</script>
<template>
  <div id="app-absolute-box">
    <h1>VenNote</h1>
    <router-view></router-view>
    <button v-if="success" id="to-exit" @click="handleExit">退出登录</button>
  </div>
</template>

<style scoped lang="scss">
@import "@/assets/global";

#app-absolute-box {
  position: relative;

  h1 {
    position: absolute;
    top: -125px;
    width: 100%;
    font-size: 80px;
    font-weight: 200;
    text-align: center;
    color: $theme;
    -webkit-text-rendering: optimizeLegibility;
    -moz-text-rendering: optimizeLegibility;
    text-rendering: optimizeLegibility;
  }

  #to-exit:hover {
    color: $theme;
  }

  #to-exit {
    position: fixed;
    bottom: 10vh;
    right: $right_pos;
    cursor: pointer;
    font-size: 2.5rem;
  }

}
</style>